<template>
  <div>
		<div>count is {{ count }}</div>
		<div>plusOne is {{ plusOne }}</div>
		<button @click="increment">count++</button>
  </div>
  <div>{{ title }}</div>
  <div>test {{ test }}</div>
</template>


<script>
import {
	onBeforeMount, // beforeMount
	onMounted, // mounted
	onBeforeUpdate, // beforeUpdate
	onUpdated, // updated
	onBeforeUnmount, // beforeDestroy
	onUnmounted, // destroyed
	
	reactive,
	ref,
	computed,
	watch
} from 'vue'
export default {
	/**
	 * 核心：
	 * 	ts、Proxy响应式，Composition代码服用问题。
	 * 
	 * 主要变化
	 * 一、引入setup函数
	 *  1、生命周期
	 *  2、计算属性
	 *  3、监听函数
	 * 
	 * 二、虚拟DOM的重写
	 */
	
	
	
	
	
  name: 'Attr',
  props: {
    msg: String 
  }, 
	/**
	 * setup()
	 *  3.0中新引进的组件选项。他的作用就是处理逻辑的。在组件实例被创建时，
	 * 	初始化props之后进行调用。此时，setup会接收到props作为参数
	 *  
	 * */
	setup (props, context) {
		/* 
		 * 0、生命周期
		 * 1、ref
		 * 	创建包装式对象，含有一个响应式属性value
		 * 2、reactive
		 * 	创建包装对象，于ref函数相比较，没有包装属性value，且参数为对象
		 * 	注意：ref、reactive可以用来声明参数，类似于vue2中的data子元素。
		 * 
		 * 、computed计算属性：可以将最终结果暴露给模板
		 * 
		 * 
		 * 、事件处理
		 * 在3.0中，method方法被弃用，事件处理调用方式：在setup函数中声明，并将其暴露给模板（return出setup函数)
		 */
		const count = ref(0)
		let title = ref(0)
		let refObj = ref({a: 666})
		let test = reactive({ val: 9 })
		console.log('组件---', this)
	
		const plusOne = computed(() => count.value + 1)
		const increment = () => {
			count.value ++
			console.log('this', this)
		}
		
		watch(
			() => count.value * 2,
			val => {
				title.value = val
				test.val = val
				console.log('检测到值的变换---此时值为---', val, test)
			}
		)
		
		onBeforeMount(() => {
			console.log('onBeforeMount')
		})
		onMounted(() => {
			console.log('onMounted')
		})
		onBeforeUpdate(() => {
			console.log('onBeforeUpdate')
		})
		onUpdated(() => {
			console.log('onUpdated')
		})
		onBeforeUnmount(() => {
			console.log('onBeforeUnmount')
		})
		onUnmounted(() => {
			console.log('onUnmounted')
		})
		return {
			props,
			context,
			count,
			plusOne,
			increment,
			title,
			test,
			refObj
		}
	}
}
</script>
<style scoped></style>
